<!--
 * @页面名称:自定义modal
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div>
    <el-dialog :modelValue="visible" title="外链申请借阅" :width="width" :draggable="draggable" @close="close">
      <div style="height: 40%; margin-bottom: 20px">
        <stable :columns="tableSetting.columns" :data="tableSetting.data"></stable>
      </div>
      <el-form :model="urlFormModal" label-width="100px" ref="urlFormRef" :rules="rules">
        <el-form-item label="外链地址:">
          <el-input v-model="urlFormModal.url" disabled />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="验证码:">
              <el-input v-model="urlFormModal.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水印文字:">
              <el-input v-model="urlFormModal.watermark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="借阅人员:">
              <el-input v-model="urlFormModal.borrower" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借阅部门:" prop="borrowDept">
              <el-input v-model="urlFormModal.borrowDept" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="dateInput" label="借阅日期:" prop="borrowDate">
              <el-date-picker v-model="urlFormModal.borrowDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="dateInput" label="到期时间:" prop="expireDate">
              <el-date-picker v-model="urlFormModal.expireDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="urlFormModal.remark" :rows="2" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否打印:">
              <el-checkbox v-model="urlFormModal.isPrint"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否下载:">
              <el-checkbox v-model="urlFormModal.isDownload"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="启用:">
              <el-checkbox v-model="urlFormModal.enable"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="验证码启用:">
              <el-checkbox v-model="urlFormModal.code_enable"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ok">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref, nextTick, onMounted, computed, watch } from "vue";
import { getSysConfig } from "@/utils/util";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useAppStore } from "@/stores/modules/app";
import { useUserStore } from "@/stores/modules/user";
import dtime from "moment";

const { proxy } = useCurrentInstance();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  draggable: {
    type: Boolean,
    default: true
  },
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  }
});

const emit = defineEmits(["update:visible", "ok", "cancel"]);
// pinia数据
const appStore = useAppStore();
const userStore = useUserStore();
// 表格配置
const tableSetting = reactive({
  columns: [
    // 表格表头
    { title: "档号", sortable: true, width: "120px", field: "OCName" },
    { title: "题名", sortable: true, field: "AI_Name" },
    {
      title: "操作",
      width: 80,
      fixed: "right",
      slots: {
        default: ({ row, rowIndex }: any) => {
          return [
            <el-link underline={false} type="primary" onClick={() => deleteFulltext(row)}>
              移除
            </el-link>
          ];
        }
      }
    }
  ],
  data: [] as any
});
// 表单绑定字段
const urlFormModal = ref({
  url: "", //传到数据库的url
  url2: "", //页面显示的url
  isPrint: false,
  isDownload: false,
  enable: true,
  code: "",
  watermark: "",
  borrower: "",
  borrowDept: "",
  borrowDate: "",
  expireDate: "",
  remark: "",
  deptName: "",
  code_enable: true
});
// 表单规则
const rules = reactive({
  borrowDate: [{ required: true, message: "请选择借阅日期", trigger: "change" }],
  expireDate: [{ required: true, message: "请选择到期日期", trigger: "change" }]
});
// 表单实例
const urlFormRef = ref();
// url预览地址随机key
const key = ref("");
// 打开弹框
const open = () => {
  const PreviewUrl = getSysConfig("PreviewUrl");
  nextTick(() => {
    if (urlFormRef.value) {
      urlFormRef.value.resetFields();
    }
    key.value = proxy.$global.createID();
    urlFormModal.value.code = createCode();
    urlFormModal.value.enable = true;
    urlFormModal.value.borrowDate = dtime().format("YYYY-MM-DD");
    urlFormModal.value.url = `${PreviewUrl}/#/preview?key=${key.value}`;
    urlFormModal.value.url2 = `/#/preview?key=${key.value}`;
    console.log(urlFormModal.value);
  });
};
// 删除全文数据
const deleteFulltext = (row: any) => {
  appStore.delBorrrowData(row);
};
// 取消事件
const cancel = () => {
  emit("update:visible", false);
};
// 头部关闭按钮点击事件
const close = () => {
  emit("update:visible", false);
};
// 确认事件
const ok = () => {
  // emit("ok");
  urlFormRef.value.validate((valid: boolean) => {
    if (valid) {
      const params = {
        bU_ID: key.value,
        secondID: tableSetting.data[0].AI_ID,
        fonds_ID: userStore.userInfo.Fonds_ID,
        bU_BorrowDate: urlFormModal.value.borrowDate,
        bU_ExpireDate: urlFormModal.value.expireDate,
        bU_IsPrint: urlFormModal.value.isPrint,
        bU_IsDownload: urlFormModal.value.isDownload,
        bU_WaterMark: urlFormModal.value.watermark,
        bU_DeptName: urlFormModal.value.deptName,
        bU_BorrowUser: urlFormModal.value.borrower,
        bU_PreviewUrl: urlFormModal.value.url2,
        bU_Verification_Code: urlFormModal.value.code,
        bU_Enable_Verification_Code: urlFormModal.value.code_enable,
        bU_Remark: urlFormModal.value.remark,
        bU_IsEnable: urlFormModal.value.enable,
        fileInfos: tableSetting.data.map((v: any) => v.AI_ID)
      };
      proxy.$vueAxios.post("MasterBaseBorrowUrl/Add", params, { noLoading: true }).then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("添加成功");
          emit("update:visible", false);
        }
      });
    }
  });
};
// 生成随机验证码
const createCode = () => {
  let code = "";
  const codeLength = 6; // 验证码的长度
  const random = [
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z"
  ]; // 随机数
  for (let i = 0; i < codeLength; i++) {
    // 循环操作
    const index = Math.floor(Math.random() * 36); // 取得随机数的索引（0~35）
    code += random[index]; // 根据索引取得随机数加到code上
  }
  return code;
};
// 监听urlborrow数据
watch(
  () => appStore.urlBorrrow,
  (newValue, oldValue) => {
    console.log(newValue);

    if (newValue) {
      tableSetting.data = newValue;
    }
  },
  {
    deep: true
  }
);
onMounted(() => {});
defineExpose({
  open
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  // position: absolute;
  margin-top: 10vh;

  // transform: translateY(-50%) !important;
}
:deep(.dateInput) {
  width: 100%;
  .el-input {
    width: 100%;
    .el-input__wrapper {
      width: calc(100% - 22px);
    }
  }
}
:deep(.el-dialog__body) {
  height: calc(85vh - 140px);
  padding: 15px 15px 0;
  overflow: scroll;
  overflow: auto;
}
:deep(.el-dialog__footer) {
  border-top: 1px solid var(--el-border-color-lighter);
}
</style>
